<template>
   <div class="user-box">
       <el-card shadow="never">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/home' }">用户管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户列表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-card> 

        <div class="search-table">
            <el-row :gutter="10">
                <el-col :span="8">
                    <el-input placeholder="请输入内容" @clear="searchUser" clearable v-model="userObj.query">
                        <template slot="append">
                            <i class="el-icon-search" @click="searchUser"></i>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" @click="dialogFormVisible = true">添加用户</el-button>
                </el-col>
            </el-row>

            <el-table
                :data="userList"
                border
                style="width: 100%">
                <el-table-column
                prop="username"
                label="用户名"
                width="180">
                </el-table-column>
                <el-table-column
                prop="mobile"
                label="手机号"
                width="180">
                </el-table-column>
                <el-table-column
                prop="create_time"
                label="创建日期">
                </el-table-column>
                <el-table-column
                prop="mg_state"
                label="状态">
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.mg_state"
                            active-color="#13ce66"
                            @change="changeUserState(scope.row.id, scope.row.mg_state)"
                        >
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" icon="el-icon-edit"  @click="editUserFn(scope.row)"></el-button>
                        <el-tooltip  :enterable="false" class="item" effect="dark" content="设置" placement="top">
                            <el-button size="small" icon="el-icon-share"></el-button>
                        </el-tooltip>
                        <el-button size="small" type="danger" icon="el-icon-delete" @click="deleteUser(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3, 5, 15, 20]"
                :page-size="3"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div> 
        
        <el-dialog title="添加用户" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
            <el-form :model="addUser"  label-width="80px" :rules="addRules" ref="addRuleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="addUser.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" prop="password">
                    <el-input v-model="addUser.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addUser.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="addUser.mobile" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUserObj('addRuleForm')">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="编辑用户" :visible.sync="editDialogFormVisible" :modal-append-to-body="false">
            <el-form :model="editUser"  label-width="80px" :rules="editRules" ref="editRuleForm">
                <el-form-item label="用户名">
                    <el-input :disabled="true" v-model="editUser.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editUser.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="editUser.mobile" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUserObj('editRuleForm', editUser.id)">确 定</el-button>
            </div>
        </el-dialog>
   </div>
</template>

<script>
export default {
    data() {
        return {
            userList: [],
            userObj: {
                query: '',
                pagenum: 1,
                pagesize: 3
            },
            addUser: {
                username: '',
                password: '',
                email: '',
                mobile: '' 
            },
            editUser: {
                username: '',
                email: '',
                mobile: '',
                id: '' 
            },
            total: 0,
            currentPage: 1,
            dialogFormVisible: false,
            editDialogFormVisible: false,
            addRules: {
                username: [
                    { required: true, message: '请输入用户名称', trigger: 'blur' },
                    { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                ]
            },
            editRules: {
                email: [
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
                ],
                mobile: [
                    { required: true, message: '请输入电话', trigger: 'blur' },
                    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                ]
            },

        }
    },
    created() {
        this.getUserList()
    },
    methods: {
        async getUserList() {
            const {data} = await this.$http({
                method: 'GET',
                url: '/users',
                params: this.userObj
            })

            if(data.meta.status !== 200) {
                return this.$message({
                    type: 'error',
                    message: data.meta.msg
                })
            }

            this.total = data.data.total
            this.userList = data.data.users
        },
        handleSizeChange(val) {
            this.userObj.pagesize = val
            this.getUserList()
        },
        handleCurrentChange(val) {
            this.userObj.pagenum = val
            this.getUserList()
        },
        searchUser(){
            console.log(111)
            this.userObj.pagenum = 1
            this.getUserList()
        },
        async changeUserState(uid, state) {
            const {data} = await this.$http({
                method: 'put',
                url: `/users/${uid}/state/${state}`,
            })

            console.log(data)
        },
        deleteUser(id) {
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const {data} = await this.$http({
                    method: 'delete',
                    url: `users/${id}`
                })

                if(data.meta.status !== 200) {
                    return this.$message({
                        type: 'error',
                        message: data.meta.msg
                    })
                }
                this.$message({
                    type: 'success',
                    message: data.meta.msg
                })
                this.getUserList()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })         
            })

            
        },
        addUserObj(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    const {data} = await this.$http({
                        method: 'post',
                        url: '/users',
                        data: this.addUser
                    })

                    if(data.meta.status == 201) {
                        this.userObj.pagenum = 1
                        this.getUserList()
                        this.dialogFormVisible = false
                        this.addUser = {
                            username: '',
                            password: '',
                            email: '',
                            mobile: '' 
                        }
                        return this.$message({
                            type: 'success',
                            message: data.meta.msg
                        })
                    }
                    return this.$message({
                        type: 'error',
                        message: data.meta.msg
                    })


                } else {
                     this.$message({
                        type: 'error',
                        message: '请填写完整信息'
                    })
                    return false;
                }
            });
        },
        editUserFn(info) {
            if(this.$refs.editRuleForm){
                this.$refs.editRuleForm.resetFields()
            }
            
            this.editUser = {
                username: info.username,
                email: info.email,
                mobile: info.mobile,
                id: info.id 
            }

            this.editDialogFormVisible = true
        },
        editUserObj(formName, id) {
             this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                            const {data} = await this.$http({
                        method: 'PUT',
                        url: `users/${id}`,
                        data: this.editUser
                    })

                    if(data.meta.status !== 200) {
                        return this.$message({
                            type: 'error',
                            message: data.meta.msg
                        })
                    }
                    this.editDialogFormVisible = false
                    this.userObj.pagenum = 1
                    this.getUserList()

                } else {
                     return this.$message({
                        type: 'error',
                        message: '请填写完整信息'
                    })
                }
            })

        }
    }
}
</script>

<style>
.user-box .el-dialog__body{
    padding: 0 20px;
}
</style>
<style lang="less" scoped>
.user-box {
    .el-card{
        border-left: 0; 
        border-right: 0; 
    }
    .search-table{
        padding: 10px;
        .el-row{
            margin-bottom: 10px;
        }
    }
    .el-pagination{
        margin-top: 10px;
    }
   
}

</style>